<div style="background:url(/static/img/gallery/cover3.jpg) center; background-size:cover; padding:170px 0" class="relative">
  <div class="p-3 relative top right">
    <div class="p-2">
      <a><i class="fa fa-facebook-square fa-2x  text-white"></i></a>
      <a><i class="fa fa-twitter-square fa-2x  text-white"></i></a>
      <a><i class="fa fa-google-plus-square fa-2x  text-white"></i></a>
    </div>
  </div>
  <div class="overlayer"></div>
  <div class="p-3 relative bottom left right">
    <div>
      <div class="p-3 clearfix" style="z-index:2">
        <img src="/static/img/avatar6.jpg" class="rounded-circle thumb-lg mr-5 float-left">
        <div>
          <div class="h4 m-0 pt-2 text-white mb-3">Buck Johns</div>
          <div class="tag tag-primary">JS ninja</div>
        </div>
      </div>
    </div>
  </div>
  <div class="p-3 relative bottom right">
    <div class="p-3 text-white">127 Friends</div>
  </div>
</div>
<ul class="nav nav-tabs nav-line bg-white ofx-hidden" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#home6" role="tab">Timeline</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#profile6" role="tab">Friends</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#messages6" role="tab">Likes</a>
  </li>
</ul>

<div class='wrapper relative col-md-12'>
  <div class="row row-gap-10">
    <div class="col-md-4 col-sm-6">
      <div class="post-widget mb-3">
        <textarea class="form-control" placeholder="What's on your mind?" data-ng-model="dummyyy"></textarea>
        <div>
          <button class="btn btn-link bg-no float-right btn-xs mt-3px" type="button">Send</button>
          <ul class="nav nav-pills nav-sm">
            <li class='nav-item'><a><i class="fa fa-upload"></i></a></li>
            <li class='nav-item'><a><i class="fa fa-camera"></i></a></li>
          </ul>
        </div>
      </div>
      <div class='panel'>
        <div class="card-block p-0 panel-fix">
          <div class="item">
            <img src="/static/img/gallery/cover2.jpg" class="w-100">
          </div>
          <div class='p-2'>
            <h3 class='m-0 mb-2'>Dummy is dummy</h3>
            <div class='text-muted'>
              Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam
              rem aperiam, eaque ipsa quae ab illo inventore
            </div>
            <div class=' clearfix mt-2'>
              <span class='float-left'>
                  <img src='/static/img/avatar3.jpg' class='rounded-circle thumb-xxs'>
                  <span class="text-muted"> John Doe</span>
              </span>
            </div>
            <div class='sep'></div>
            <div>
              <button class="btn btn-icon btn-secondary btn-xs rounded"><i class="fa fa-facebook"></i></button>
              <button class="btn btn-icon btn-secondary btn-xs rounded"><i class="fa fa-twitter"></i></button>

              <button class="btn btn-icon btn-secondary btn-xs rounded float-right"><i class="fa fa-star-o"></i>
              </button>
            </div>
          </div>
        </div>
      </div>

      <div class='panel b-success'>
        <div class="card-block p-0">
          <div class="row m-0 bb-l">
            <div class="col-sm-4 col-lg-4 p-0 text-center br-l">
              <div class="p-3">
                <div><i class="fa fa-comment-o fa-2x fa-fw"></i></div>
                <div class="text-muted mt-3px font-xs">Comments</div>
              </div>
            </div>
            <div class="col-sm-4 col-lg-4 p-0 text-center br-l">
              <div class="p-3">
                <div><i class="fa fa-folder-o fa-2x fa-fw"></i></div>
                <div class="text-muted mt-3px font-xs">Folders</div>
              </div>
            </div>
            <div class="col-sm-4 col-lg-4 p-0 text-center">
              <div class="p-3">
                <div><i class="fa fa-laptop fa-2x fa-fw"></i></div>
                <div class="text-muted mt-3px font-xs">Machines</div>
              </div>
            </div>
          </div>
          <div class="row m-0">
            <div class="col-sm-4 col-lg-4 p-0 text-center br-l">
              <div class="p-3">
                <div><i class="fa fa-lightbulb-o fa-2x fa-fw"></i></div>
                <div class="text-muted mt-3px font-xs">Ideas</div>
              </div>
            </div>
            <div class="col-sm-4 col-lg-4 p-0 text-center br-l">
              <div class="p-3">
                <div><i class="fa fa-heart-o fa-2x fa-fw"></i></div>
                <div class="text-muted mt-3px font-xs">Likes</div>
              </div>
            </div>
            <div class="col-sm-4 col-lg-4 p-0 text-center">
              <div class="p-3">
                <div><i class="fa fa-smile-o fa-2x fa-fw"></i></div>
                <div class="text-muted mt-3px font-xs">Experience</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class='panel'>
        <div class="card-header ">
          <div class=' clearfix p-2'>
                        <span class='float-left'>
                            <img src='/static/img/avatar6.jpg' class='rounded-circle thumb-xs'>
                            Hue Brown
                        </span>
            <span class="float-right text-muted">
                            10 min ago
                        </span>
          </div>
        </div>
        <div class="card-block p-0">

          <div class='p-2'>
            <h3 class='m-0 mb-2'>Sit amet</h3>
            <div class='text-muted font-italic'>
              ore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam
            </div>
          </div>
        </div>
      </div>

    </div>

    <div class="col-md-4 col-sm-6">

      <div class="panel b-0 ">
        <div class="card-header b-0 text-center p-2">
          <i class="fa fa-twitter fa-3x"></i>
        </div>
        <div class="card-block p-2 pt-0  text-center">
          <div>
            "Your time is limited, so don't waste it living someone else's life."#qoute
          </div>
          <div class="text-right font-xs font-italic">
            <span></span>- Steve Travis
          </div>
          <div class="clearfix mt-2">
            <button class="btn btn-icon btn-secondary btn-xs rounded float-right"><i class="fa fa-star-o"></i>
            </button>
            <button class="btn btn-icon btn-secondary btn-xs rounded float-right mr-5"><i class="fa fa-heart-o"></i>
            </button>
          </div>
        </div>
      </div>

      <div class="row row-gap-5">
        <div class="col-md-6">
          <div class='panel b-danger'>
            <div class="card-header">
              <i class="fa fa-circle-o "></i> Stock#2
              <span class="float-right text-grey">
                                <i class="fa fa-comment-o "></i> 22
                            </span>
            </div>
            <div class="card-block p-0 text-center">
              <div class='p-3'>
                <div class="mb-3">Microsoft (MSFT)</div>
                <div class="text-muted font-xs mb-2"> - Dec 12, 4:00PM EST</div>
                <div>
                  <span class="h2 m-0">46.95 </span>
                  <i class="fa fa-long-arrow-down text-danger"></i>
                  <span class="h5 m-0 text-danger"> 0.22 (0.47%) </span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div class='panel b-primary'>
            <div class="card-header">
              <i class="fa fa-circle-o "></i> Stock#1
              <span class="float-right text-grey">
                                <i class="fa fa-comment-o "></i> 5
                            </span>
            </div>
            <div class="card-block p-0 text-center">


              <div class='p-3'>
                <div class="mb-3">Apple Inc.</div>
                <div class="text-muted font-xs mb-2"> - Dec 12, 4:00PM EST</div>
                <div>
                  <span class="h2 m-0">111.55 </span>
                  <i class="fa fa-long-arrow-up text-success"></i>
                  <span class="h5 m-0 text-success"> 0.15 (0.11%) </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>


      <div class='panel'>
        <div class="card-block p-0">
          <div class='p-2'>
            <h4 class='m-0 mb-2 text-success'><i class="fa fa-heart-o"></i> Trending</h4>
            <h3 class='m-0 mb-2'>Lorem ipsum</h3>
            <div class='text-muted'>
              quuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem
              ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut
              labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem
              ullam
            </div>
            <div class=' clearfix mt-2'>
                            <span class='float-left'>
                                <img src='/static/img/avatar4.jpg' class='rounded-circle thumb-xxs'>
                                Mike Doe
                            </span>
            </div>
            <div class='sep'></div>
            <div>
              <button class="btn btn-icon btn-secondary btn-xs rounded"><i class="fa fa-facebook"></i></button>
              <button class="btn btn-icon btn-secondary btn-xs rounded"><i class="fa fa-twitter"></i></button>

              <button class="btn btn-icon btn-secondary btn-xs rounded float-right"><i class="fa fa-star-o"></i>
              </button>
            </div>
          </div>
        </div>
      </div>

      <div class='panel'>
        <div class="card-block p-0 py-3">
          <div class="px-3">
            <div class="h4 m-0">
              <span><i class="fa fa-twitter fa-fw"></i> Twitter</span>
              <span class="float-right text-success">22 <i class="fa fa-long-arrow-up"></i></span>
            </div>
            <div class="text-muted font-xs mt-3px">Last update: 10min ago</div>
          </div>
          <div class="sep"></div>
          <div class="px-3">
            <div class="h4 m-0">
              <span><i class="fa fa-facebook fa-fw"></i> Facebook</span>
              <span class="float-right text-success">1 <i class="fa fa-long-arrow-up"></i></span>
            </div>
            <div class="text-muted font-xs mt-3px">Last update: 10min ago</div>
          </div>
          <div class="sep"></div>
          <div class="px-3">
            <div class="h4 m-0">
              <span><i class="fa fa-google-plus fa-fw"></i> Google+</span>
              <span class="float-right text-success">5 <i class="fa fa-long-arrow-up"></i></span>
            </div>
            <div class="text-muted font-xs mt-3px">Last update: 10min ago</div>
          </div>
        </div>
      </div>

      <div class="row row-gap-5 text-center">
        <div class="col-md-6 col-sm-6">

          <div class='panel'>
            <div class="card-block p-0 panel-fix">
              <div class="item">
                <img src="/static/img/gallery/card1.jpg" class="w-100">
              </div>
              <div class='p-2'>
                <h3 class='m-0 mb-3'>Thing</h3>
                <div class="text-muted">Ipsum dolor</div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-6 col-sm-6">

          <div class='panel'>
            <div class="card-block p-0 panel-fix">
              <div class="item">
                <img src="/static/img/gallery/card2.jpg" class="w-100">
              </div>
              <div class='p-2'>
                <h3 class='m-0 mb-3'>Awesome</h3>
                <div class="text-muted">Lorem ipsum</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="col-md-4 col-sm-6">


      <div class='panel'>
        <div class="card-header ">
          <div class=' clearfix p-2'>
                        <span class='float-left'>
                            <img src='/static/img/avatar5.jpg' class='rounded-circle thumb-xs'>
                            Hue Brown
                        </span>
            <span class="float-right text-muted">
                            10 min ago
                        </span>
          </div>
        </div>
        <div class="card-block p-0">

          <div class='p-2'>
            <h3 class='m-0 mb-2'>Sit amet</h3>
            <div class='text-muted font-italic'>
              ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut
              labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem
              ullam
            </div>
          </div>
        </div>
      </div>


      <div class='panel'>
        <div class="card-block p-0 panel-fix">
          <div class="item">
            <img src="/static/img/gallery/dummy15.jpg" class="w-100">
            <div class="p-3 relative bottom top right left bg-overlayer-dark">
              <div class="center-container">
                <div class="mx-auto">
                  <div class="text-white text-center">
                    <h5 class="m-0 mb-3">Popular design collections</h5>
                    <h2 class="m-0 mb-2">PRODUCT DESIGN</h2>
                    <div class="text-muted mb-5">How to make nice things</div>
                    <div>
                      <button class="btn rounded btn-success">Follow 2.3K+</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="p-3 relative bottom left">
              <div class="p-2">
                <a href class="text-white">
                  <i class="fa fa-reply fa-2x"></i>
                </a>
              </div>
            </div>
            <div class="p-3 relative bottom right">
              <div class="p-2">
                <a href class="text-white">
                  <i class="fa fa-star-o fa-2x"></i>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class='panel'>
        <div class="card-block p-0">
          <div class='p-2 pb-0 '>
            <h3 class='m-0 mb-2'>Project idea</h3>
            <div class='text-muted'>
              quuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem
              ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut
              labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem
              ullam
            </div>
            <div class=' clearfix mt-2'>
                            <span class='float-left'>
                                <img src='/static/img/avatar4.jpg' class='rounded-circle thumb-xs'>
                                Mike Doe
                            </span>
            </div>
            <div class='sep'></div>
            <div class="mb-2">
              <input type="text" class="form-control" placeholder="Your msg here...">

            </div>

          </div>
          <ul class="list-unstyled with-image m-0 bg-light lt bb-0 font-xs">
            <li>
              <a class="text-grey">
                <img src="/static/img/avatar.jpg" class="rounded-circle thumb-xxs">
                <div>
                  <p class="m-0">
                    <strong>Jesse Holmes</strong> <span class="float-right time">Now</span>
                  </p>
                  <p class="m-0"> Lorem ipsum dolor sit amet</p>
                </div>
              </a>
            </li>
            <li>
              <a class="text-grey">
                <img src="/static/img/avatar2.jpg" class="rounded-circle thumb-xxs">
                <div>
                  <p class="m-0">
                    <strong>Greg Abraham</strong><span class="time">20 mins</span>
                  </p>
                  <p class="m-0"> Please send me an email about the task</p>
                </div>
              </a>
            </li>
            <li>
              <a class="text-grey">
                <img src="/static/img/avatar3.jpg" class="rounded-circle thumb-xxs">
                <div>
                  <p class="m-0">
                    <strong>Rick Nevada</strong><span class="time">1 hour</span>
                  </p>
                  <p class="m-0">Ok, the problem is solved. Thank You!</p>
                </div>
              </a>
            </li>
            <li>
              <a class="text-grey">
                <img src="/static/img/avatar4.jpg" class="rounded-circle thumb-xxs">
                <div>
                  <p class="m-0">
                    <strong>Dexter Minas</strong><span class="time">12 hour</span>
                  </p>
                  <p class="m-0">Hello, nice to see you yesterday.</p>
                </div>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

